<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="imagepreload.js"></script>		
    <script type="text/javascript">
      document.observe("dom:loaded", INIT_indexpage );
      
      /*
       * Function is called when the loaded Event is fired
       */
      function INIT_indexpage()
      {
        var Images = new Array('pic_01.bmp','pic_02.bmp','pic_03.bmp','pic_04.bmp','pic_05.bmp');
        new ImagePreload( Images, INIT_PreloadFinishAction, INIT_UpdateLoadingStatus );
      }   
      
      /*
       * Function to perform Actions when preloading is finished
       */
      function INIT_PreloadFinishAction()
      {
        $('loaddiv').addClassName('index_invisible');
        $('centerpage').removeClassName('index_invisible');        
      }
      
      /*
       * After every Pic the Status gets updated
       */
      function INIT_UpdateLoadingStatus( percentage )
      {
        $('loadpercentage').update( "loading "+percentage+" %");        
      }
    </script>	
    <style type="text/css">
      .index_invisible{ display:none; }
    </style>    
		<title>Preloading Testpage</title>
	</head>
	<body>
	  <div id="loaddiv" class="loaddiv">
      <div id="loadpercentage"></div><br/>
      <!--[if lte IE 6]>
      This site is not optimized for IE 6.0<br/>
      Please use a modern Browser or simply update to IE 7.0
      <![endif]-->
	  </div>
    <div id="centerpage" class="index_invisible">
      Your content!<br/>
      <img src="pic_01.bmp" alt="Pic01"/><br/>
      <img src="pic_02.bmp" alt="Pic02"/><br/>
      <img src="pic_03.bmp" alt="Pic03"/><br/>
      <img src="pic_04.bmp" alt="Pic04"/><br/>
      <img src="pic_05.bmp" alt="Pic05"/>
    </div>
	</body>
</html>
